<style type="text/css">
    .sm-st {
        background: #fff;
        padding: 20px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-bottom: 20px;
        -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    }
    .sm-st-info {
        font-size: 12px;
        padding-top: 2px;
    }

    .sm-st-info span {
        display: block;
        font-size: 24px;
        font-weight: 600;
    }
    .st-red {
        color: #F05050;
    }
    .st-violet {
        color: #7266ba;
    }
    .st-blue {
        color: #23b7e5;
    }
</style>

<div class="panel panel-default panel-intro">
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="row">
                    <div class="col-sm-2 col-xs-6">
                        <div class="sm-st clearfix">
                            <div class="sm-st-info st-violet">
                                <span>{$totalorder}</span>
                                {:__('Total order')}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2 col-xs-6">
                        <div class="sm-st clearfix">
                            <div class="sm-st-info st-violet">
                                <span>{$totalpayorder}</span>
                                {:__('Total order of payment')}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2 col-xs-6">
                        <div class="sm-st clearfix">
                            <div class="sm-st-info st-red">
                                <span>{$totalorderamount}</span>
                                {:__('Total order amount')}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2 col-xs-6">
                        <div class="sm-st clearfix">
                            <div class="sm-st-info st-red">
                                <span>{$totalpayamount}</span>
                                {:__('Total amount of payment')}
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-2 col-xs-6">
                        <div class="sm-st clearfix">
                            <div class="sm-st-info st-blue">
                                <span>{$totalfinishtest}</span>
                                {:__('Total finished test records')}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2 col-xs-6">
                        <div class="sm-st clearfix">
                            <div class="sm-st-info st-blue">
                                <span>{$totalunfinishtest}</span>
                                {:__('Total unfinished test records')}
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row text-center" style="margin-bottom: 20px;">
                    <div class="col-sm-12">
                        {foreach name="str_time" item="item"}
                        <a class="btn btn-success btn-my-chart" data-id="{$key}">{$item}</a>
                        {/foreach}
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div id="echart" style="height:400px;width:100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>